<template>
	<view class="data-v-3bdadbbd content" :class="execute?'padding':''">
		<view class="status_bar data-v-3bdadbbd" :style="'margin-top:'+statusBarHeight+'px'+';'">
			<view class="view_back data-v-3bdadbbd" :style="'height:'+navigationBarHeight+'px'+';'">
				<uni-icons class="data-v-3bdadbbd" color="#333" size="22" type="back" @click="navBack"></uni-icons>
			</view>
			<text class="text_title1 data-v-3bdadbbd"
				:style="'height:'+navigationBarHeight+'px'+';'+'padding-right:'+'80rpx'+';'+'line-height:'+navigationBarHeight+'px'">方案详情</text>
		</view>
		<view class="scroll-wrap data-v-3bdadbbd">
			<view class="scheme_title data-v-3bdadbbd"
				:style="'padding-top:'+(statusBarHeight+navigationBarHeight+20)+'px'">
				<image class="head_image data-v-3bdadbbd" mode="widthFix"
					src="https://ehealth.ipd.hihonor.com/etmcstatic/iv_scheme_detail.png"></image>
				<view class="data-v-3bdadbbd" style="margin-top:30rpx;align-items:center;">
					<text class="BebasNeueBold data-v-3bdadbbd"
						style="font-size:44rpx;color:#e83229;font-weight:600;">{{schemeData.frequency}}</text>
					<text class="data-v-3bdadbbd" style="font-size:32rpx;color:#1e3564;">{{'次/周'}}</text>
				</view>
				<view class="data-v-3bdadbbd" style="margin-top:14rpx;align-items:center;"
					v-for="(item,index) in schemeData.checkInPointList" :key="index">
					<uni-icons class="data-v-3bdadbbd" color="#333" size="22"
						:type="index==0?'location':'calendar'"></uni-icons>
					<text class="data-v-3bdadbbd" style="font-size: 28rpx;color: #293e73;">{{item}}</text>
				</view>
			</view>
			<uni-list class="text-left" :border="false">
				<uni-list-item class="list-item" showArrow="true" title="佩戴心率带/手环&连接">
				</uni-list-item>
				<uni-list-item class="list-item" showArrow="true" title="动态拉伸" note="3 分钟">
				</uni-list-item>
				<uni-list-item class="list-item" showArrow="true" title="水阻划船器/自行车/跑步机热身" note="5分钟 最小负荷（浆频）26次/分钟">
				</uni-list-item>
				<uni-list-item class="list-item" showArrow="true" title="功率自行车" note="（>=60RPM）最大负荷：130">
				</uni-list-item>
				<uni-list-item class="list-item-notop" title="6分钟；40%最大负荷；50(W)">
				</uni-list-item>
				<uni-list-item class="list-item-notop" title="6分钟；50%最大负荷；65(W)">
				</uni-list-item>
				<uni-list-item class="list-item-notop" title="6分钟；60%最大负荷；80(W)">
				</uni-list-item>
				<uni-list-item class="list-item-notop" title="6分钟；70%最大负荷；90(W)">
				</uni-list-item>
				<uni-list-item class="list-item" showArrow="true" title="电阻划船器" note="浆频28次/分钟 最大负荷：10">
				</uni-list-item>
				<uni-list-item class="list-item-notop" v-for="(item,index) in letterArray" :key="index">
					<template v-slot:body>
						<view class="slot-box">
							<view class="leftBoxView">
								<text class="data-v-3bdadbbd">{{item}}</text>
							</view>
							<view class="rightBoxView">
								<view class="rightBoxItem">
									<text class="data-v-3bdadbbd">3分钟；40%最大负荷；4(W)</text>
								</view>
								<view class="text-line"></view>
								<view class="rightBoxItem">
									<text class="data-v-3bdadbbd">1分钟；90%最大负荷；9(W)</text>
								</view>
							</view>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item class="list-item" showArrow="true" title="抗阻循环训练" :note="noteArray">
				</uni-list-item>
			</uni-list>
			<view class="view_bottom data-v-3bdadbbd" v-if="execute">
				<button class="btn data-v-3bdadbbd" :disabled="!execute" type="warn" @click="popupShow">开始训练</button>
			</view>
		</view>
		<uni-popup backgroundColor="rgba(0,0,0,0.000)" class="data-v-3bdadbbd" ref="popup">
			<view class="popup_view data-v-3bdadbbd">
				<text class="popup_content data-v-3bdadbbd">{{'下载教学视频将消耗'+needDownLoadVideosSize+'流量。确定下载？'}}</text>
				<view class="progress-box data-v-3bdadbbd" :hidden="!comfirmDownload">
					<text
						class="popup_tips data-v-3bdadbbd">{{'下载第'+downLoadindex+1+'个视频,共'+needDownLoadVideos.length+'个'}}</text>
					<progress :active="true" activeMode="forwards" activeColor="red" borderRadius="4"
						class="data-v-3bdadbbd" :percent="videoPercent" showInfo="true" strokeWidth="8"></progress>
				</view>
				<view class="data-v-3bdadbbd">
					<button class="popup_btn2 data-v-3bdadbbd" type="default" @click="popupClose">取消</button>
					<button class="popup_btn2 data-v-3bdadbbd" :disabled="comfirmDownload" type="warn"
						@click="popupConfirm">下载</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup backgroundColor="rgba(0,0,0,0.000)" class="data-v-3bdadbbd" ref="trainCompleteTipRef" type="center">
			<view class="popup_view train data-v-3bdadbbd">
				<view class="train-img data-v-3bdadbbd">
					<image class="data-v-3bdadbbd" mode="aspectFill" src=""></image>
				</view>
				<view class="train-title data-v-3bdadbbd">今日训练已完成</view>
				<view class="train-sub-title data-v-3bdadbbd">请前往进行体重检测</view>
				<view class="data-v-3bdadbbd"
					style="display:flex;justify-content:space-between;width:100%;margin:40rpx 0 0;">
					<button class="popup_btn2 data-v-3bdadbbd" type="default">稍后再去</button>
					<button class="popup_btn2 data-v-3bdadbbd" type="warn">前往检测</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup backgroundColor="rgba(0,0,0,0.000)" ref="inquiryTips1" type="bottom">
			<view class="popup_inquiry">
				<text class="popup_title">佩戴心率带/手环&连接</text>
				<image class="image" src="https://ehealth.ipd.hihonor.com/etmcstatic/iv_heart_rate.png"></image>
				<view class="popup_input">
					<input class="uni-input" maxlength="6" placeholder="请输入即时心率" type="number"
						v-model="inputRateValue"></input>
					<text style="color:#000000;font-size:28rpx;">bpm</text>
				</view>
				<button class="popup_btn" :disabled="tipsdisable" type="warn">下一步</button>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isCheckIn: false,
				baseline_components: [],
				sport_way_video: [],
				id: "",
				schemeDetail: {},
				schemeData: {
					frequency: 3,
					checkInPointList: ['转化医学大楼运动健康实验室', '2024-09-01 ~ 2025-12-01']
				},
				videoPercent: 0,
				downLoadindex: 0,
				comfirmDownload: false,
				needDownLoadVideos: [],
				downloadTask: null,
				needDownLoadVideosSize: 0,
				execute: true,
				schemeStart: false,
				finishRecordList: [],
				executeId: 0,
				executeNextSport: false,
				isOnLoad: false,
				childResultList: [],
				sportway_item: [],
				backgroundColor: {
					backgroundColor: "rgba(207,227,254,0)"
				},
				inputRateValue: "",
				tipsdisable: true,
				statusBarHeight: 20,
				navigationBarHeight: 44,
				trainCompleteTipRef: null,
				projectUserId: 0,
				letterArray: ['A', 'B', 'C', 'D', 'E'],
				noteArray: '1.重量：Max*30—70%；\n2.次数：8~12次/组; \n3.组数：每个训练动作需要完成3组；\n4.小组间休息 60秒，大组间休息120秒；'
			};
		},
		onLoad() {

		},
		methods: {
			navBack() {
				uni.navigateBack()
			},
			popupShow() {
				// this.$refs.popup.open('bottom')
				this.$refs.inquiryTips1.open('bottom')
			},
			popupClose() {
				this.$refs.popup.close();
			},
			popupConfirm() {
				uni.navigateTo({
					url: '/pages/train/sportway'
				})
			}
		}
	}
</script>

<style>
	page {
		min-height: 100%;
		width: 100%;
	}

	page,
	view.data-v-3bdadbbd {
		display: flex;
	}

	.tab_content.data-v-3bdadbbd {
		background-color: #fff;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		position: relative;
	}

	.status_bar.data-v-3bdadbbd {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	.view_back.data-v-3bdadbbd {
		align-items: center;
		display: flex;
		justify-content: center;
		width: 80rpx;
	}

	.text_title1.data-v-3bdadbbd {
		flex: 1;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
	}

	.scroll-wrap.data-v-3bdadbbd {
		flex: 1;
		flex-direction: column;
		margin-bottom: 16rpx;
		position: relative;
	}

	.scroll.data-v-3bdadbbd {
		bottom: 0;
		flex: 1;
		position: absolute;
		top: 0;
	}

	.content.data-v-3bdadbbd {
		background-color: #f2f3f5;
		flex: 1;
		flex-direction: column;
		min-height: 100%;
		overflow: hidden;
	}

	.padding.data-v-3bdadbbd {
		padding-bottom: 140rpx;
	}

	.view_bottom.data-v-3bdadbbd {
		flex-end: true;
		background-color: #f2f3f5;
		bottom: 0;
		flex: 1;
		flex-direction: column;
		height: 140rpx;
		left: 50%;
		position: fixed;
		transform: translateX(-50%);
		width: 100%;
	}

	.btn.data-v-3bdadbbd,
	.view_bottom.data-v-3bdadbbd {
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.btn.data-v-3bdadbbd {
		background-color: #ef4141;
		border-radius: 50rpx;
		color: #fff;
		font-size: 32rpx;
		height: 80rpx;
		width: 90%;
	}

	.btn.data-v-3bdadbbd:active {
		background-color: #f79f9f;
	}

	.head_image.data-v-3bdadbbd {
		height: auto;
		position: absolute;
		right: 40rpx;
		top: 80rpx;
		width: 236rpx;
	}

	.scheme_title.data-v-3bdadbbd {
		background-color: #cfe3fe;
		border-bottom-left-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		flex-direction: column;
		margin-bottom: 10rpx;
		min-height: 216rpx;
		overflow: hidden;
		padding-bottom: 30rpx;
		padding-left: 42rpx;
		padding-top: 40rpx;
		position: relative;
	}

	.head_cotent.data-v-3bdadbbd {
		display: flex;
		flex-direction: column;
		height: auto;
		position: fixed;
		width: 100%;
		z-index: 1;
	}

	.popup_title.data-v-3bdadbbd {
		color: #3a3a3a;
		font-size: 40rpx;
		font-weight: 600;
	}

	.popup_content.data-v-3bdadbbd {
		color: rgba(0, 0, 0, 0.8);
		font-size: 32rpx;
		margin-bottom: 32rpx;
	}

	.popup_tips.data-v-3bdadbbd {
		color: rgba(0, 0, 0, 0.7);
		font-size: 26rpx;
		margin-bottom: 8rpx;
	}

	.popup_view.data-v-3bdadbbd {
		background: #fff;
		border-radius: 20rpx;
		flex-direction: column;
		margin: 30rpx;
		padding: 44rpx;
	}

	.train.data-v-3bdadbbd {
		align-items: center;
		background-image: linear-gradient(180deg,
				#fdf8e4 10%,
				hsla(48, 86%, 94%, 0.8) 0,
				hsla(48, 86%, 94%, 0.6) 15%,
				#fff 50%);
		position: relative;
	}

	.train-img.data-v-3bdadbbd {
		bottom: 300rpx;
		position: absolute;
	}

	.train-title.data-v-3bdadbbd {
		font-size: 36rpx;
		font-weight: 700;
		margin-bottom: 16rpx;
		padding-top: 120rpx;
	}

	.train-sub-title.data-v-3bdadbbd {
		color: #787876;
		font-size: 28rpx;
	}

	.popup_btn1.data-v-3bdadbbd {
		align-items: center;
		border-radius: 50rpx;
		display: flex;
		flex: 1;
		font-size: 32rpx;
		height: 80rpx;
		justify-content: center;
		width: auto;
	}

	button.data-v-3bdadbbd::after {
		border: none;
	}

	.popup_btn2.data-v-3bdadbbd {
		align-items: center;
		border-radius: 50rpx;
		display: flex;
		flex: 1;
		font-size: 32rpx;
		height: 80rpx;
		justify-content: center;
		margin-left: 32rpx;
		width: auto;
	}

	.progress-box.data-v-3bdadbbd {
		flex: 1;
		flex-direction: column;
		margin-bottom: 40rpx;
	}

	.checkin.data-v-3bdadbbd {
		align-items: center;
	}

	.checkin.data-v-3bdadbbd :active {
		color: #eee;
	}

	.checkin_finish.data-v-3bdadbbd {
		align-items: center;
	}

	.checkin-wrapper.data-v-3bdadbbd {
		background-color: #fff;
		border-radius: 50rpx 0 0 50rpx;
		box-shadow: 0 0 12rpx #00000016;
		padding: 10rpx 30rpx 10rpx 10rpx;
		position: fixed;
		right: 0;
		top: 17%;
	}

	.BebasNeueBold.data-v-3bdadbbd {
		font-family: BebasNeueBold;
	}

	.list-item {
		width: 96%;
		margin-top: 2%;
		margin-left: 2%;
		margin-right: 2%;
	}

	.list-item-notop {
		width: 96%;
		margin-left: 2%;
		margin-right: 2%;
	}

	.slot-box {
		display: flex;
		flex: 1;
		flex-direction: row;
		align-items: center;
	}

	.leftBoxView {
		flex: 1;
		display: flex;
		justify-content: center;
	}

	.rightBoxView {
		flex: 4;
		display: flex;
		flex-direction: column;
	}

	.rightBoxItem {
		display: flex;
		flex: 1;
		position: relative;
		flex-direction: row;
		padding: 6px;
		flex: 1;
		overflow: hidden;
	}

	.text-line {
		width: 100%;
		height: 1px;
		background-color: #e5e5e5;
	}

	.popup_inquiry {
		align-items: center;
		background: #fff;
		border-radius: 20rpx;
		display: -webkit-flex;
		display: flex;
		flex: 1;
		flex-direction: column;
		margin: 32rpx;
		padding-bottom: 32rpx;
		padding-top: 44rpx;

		.image {
			align-items: center;
			height: 193rpx;
			justify-content: center;
			margin-top: 63rpx;
			width: 293rpx;
		}

		.title {
			color: #707b7c;
			font-size: 42rpx;
		}

		.popup_input {
			align-items: center;
			border: 3rpx solid #e7e7e7;
			border-radius: 20rpx;
			display: -webkit-flex;
			display: flex;
			flex: 1;
			flex-direction: row;
			height: 88rpx;
			justify-content: center;
			margin-top: 20rpx;
			padding-right: 34rpx;
		}

		.popup_title {
			color: #3a3a3a;
			font-size: 40rpx;
			margin-left: 44rpx;
			text-align: left;
			width: 90%;
		}

		.popup_btn {
			background-color: #ef4141;
			margin-left: 32rpx;
			margin-right: 30rpx;
			margin-top: 40rpx;
			width: 268rpx;
		}

		.popup_btn_disable {
			align-items: center;
			background-color: #f79f9f;
			border-radius: 50rpx;
			display: -webkit-flex;
			display: flex;
			font-size: 32rpx;
			height: 80rpx;
			justify-content: center;
			margin-left: 32rpx;
			margin-right: 30rpx;
			margin-top: 40rpx;
			width: 268rpx;
		}

		.uni-input {
			background-color: #fff;
			flex: 1;
			font-size: 28rpx;
			height: 88rpx;
			margin-left: 20rpx;
		}
	}
</style>